<template>
    <div class="cnet_container">
        <Search @search="onSearch" @reset="onReset" />
        <div class="btn_card">
            <el-button v-auth="'cent_commission:export'" type="primary" @click="onExport">导出</el-button>
        </div>
        <Table :list="state.list" />
        <Pagination
            :total="state.totalCount"
            :page-size="params.perPage"
            :current-page="params.page"
            @size-change="onSizeChange"
            @pageChange="onPageChange" />
    </div>
</template>

<script setup>
import Search from './search.vue';
import Table from './table.vue';
import Pagination from '@/components/Pagination.vue';
import { exportExc } from '@/commons/utils';
import { reactive, onMounted } from 'vue';
import request from '@/request';

const params = reactive({
    distributor: '', //分销员关键字（ID、手机号、昵称）
    shopId: 0, //店铺ID
    orderSn: '', //订单编号
    type: 0, //佣金类型：1-推广 2-邀请
    status: 0, //状态：1-待结算 2-已结算 3-已失效
    createdAtStart: '', //创建时间（起）
    createdAtEnd: '', //创建时间（止）
    page: 1, //当前页
    perPage: 10 //每页展示条数
});
const state = reactive({
    list: [],
    totalCount: 0
});
const getList = async () => {
    const { data } = await request('getBrokerageListServ', params);
    state.list = data.list || [];
    state.totalCount = data.totalCount || 0;
};

const onSizeChange = v => {
    params.perPage = v;
    getList();
};
const onPageChange = v => {
    params.page = v;
    getList();
};
const onSearch = v => {
    Object.assign(params, v);
    getList();
};
const onReset = v => {
    Object.assign(params, v);
    getList();
};
const onExport = async () => {
    const res = await request('brokerageExportServ', params);
    exportExc(res, '分佣记录');
};
onMounted(() => {
    getList();
});
</script>

<style lang="scss" scoped>
.cnet_container {
    .btn_card {
        margin-bottom: 16px;
        text-align: right;
    }
}
</style>
